<!-- 代码已包含 CSS：使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 -->

<template>
  <div class="min-h-screen bg-gray-50 p-4">
    <!-- 主体内容 -->
    <div class="flex min-h-screen">
      <!-- 右侧内容 -->
      <div class="w-full">
        <!-- 数据卡片 -->
        <div class="grid grid-cols-4 gap-6 mb-6">
          <div
            v-for="(card, index) in dataCards"
            :key="index"
            class="bg-white rounded-lg p-6 shadow-sm"
          >
            <div class="flex items-center justify-between">
              <span class="text-gray-600">{{ card.title }}</span>
              <el-icon :class="card.iconColor"
                ><component :is="card.icon"
              /></el-icon>
            </div>
            <div class="mt-2">
              <span class="text-2xl font-semibold">{{ card.value }}</span>
              <span class="text-sm text-gray-500 ml-2">{{ card.unit }}</span>
            </div>
          </div>
        </div>

        <!-- 项目进度图 -->
        <div class="bg-white p-6 rounded-lg shadow-sm mb-6">
          <div class="flex items-center justify-between mb-4">
            <h3 class="text-lg font-medium">项目进度概览</h3>
            >
          </div>
          <div ref="chartRef" style="height: 400px"></div>
        </div>

        <!-- 底部卡片 -->
        <div class="grid grid-cols-2 gap-6">
          <!-- 预警提醒 -->
          <div class="bg-white rounded-lg p-6 shadow-sm">
            <h3 class="text-lg font-medium mb-4">预警提醒</h3>
            <el-timeline v-if="activities.length">
              <el-timeline-item
                v-for="(activity, index) in activities"
                :key="index"
                :type="activity.type"
                :color="activity.color"
                :timestamp="activity.timestamp"
              >
                {{ activity.content }}
              </el-timeline-item>
            </el-timeline>
            <div v-else class="text-center text-gray-500">暂无预警提醒</div>
          </div>

          <!-- 经费使用情况 -->
          <div class="bg-white rounded-lg p-6 shadow-sm">
            <h3 class="text-lg font-medium mb-4">经费使用情况</h3>
            <div ref="budgetChartRef" style="height: 300px"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue"
import * as echarts from "echarts"
import { getIndexData } from "@/api/project/view.js"

const chartRef = ref()
const budgetChartRef = ref()

const dataCards = ref([
  {
    title: "进行中项目",
    value: 12,
    unit: "个",
    icon: "Loading",
    iconColor: "text-blue-500",
  },
  {
    title: "待评审项目",
    value: 5,
    unit: "个",
    icon: "Document",
    iconColor: "text-yellow-500",
  },
  {
    title: "即将到期",
    value: 3,
    unit: "个",
    icon: "Bell",
    iconColor: "text-red-500",
  },
  {
    title: "总经费",
    value: 280,
    unit: "万元",
    icon: "Money",
    iconColor: "text-green-500",
  },
])

const activities = ref([
  {
    content: "量子通信研究项目将于30天后到期，请及时提交研究成果",
    timestamp: "2024-02-15",
    type: "warning",
    color: "#E6A23C",
  },
  {
    content: "纳米材料项目中期检查即将开始，请准备相关材料",
    timestamp: "2024-02-10",
    type: "info",
    color: "#409EFF",
  },
  {
    content: "人工智能伦理研究项目经费使用率低于预期",
    timestamp: "2024-02-05",
    type: "danger",
    color: "#F56C6C",
  },
])
const projectData = ref()
const budgetData = ref()
onMounted(() => {
  debugger
  getIndexData().then((res) => {
    const resData = res.data
    dataCards.value[0].value = resData.executeProjectsCount
    dataCards.value[1].value = resData.acceptanceProjectsCount
    dataCards.value[2].value = resData.deadlineProjectsCount
    dataCards.value[3].value = resData.totleExpenses
    projectData.value = resData.fundProjectsList
    budgetData.value = resData.expensesUsedList
    activities.value = resData.alertsList
    const typeArr = ["warning", "info", "danger"]
    const colorArr = ["#E6A23C", "#409EFF", "#F56C6C"]
    activities.value = resData.alertsList.map((item) => {
      return {
        content: item.title,
        timestamp: item.deadline,
        type: typeArr[Math.floor(Math.random() * typeArr.length)],
        color: colorArr[Math.floor(Math.random() * colorArr.length)],
      }
    })

    if (chartRef.value) {
      const chart = echarts.init(chartRef.value)
      chart.setOption({
        animation: false,
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {
          data: ["项目进度"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "value",
          boundaryGap: [0, 0.01],
        },
        yAxis: {
          type: "category",
          // data: [
          //   "量子通信研究",
          //   "纳米材料研究",
          //   "人工智能伦理",
          //   "生物医药研究",
          //   "环境治理",
          // ],
          data: projectData.value.map((item) => item.fundProjects.title),
        },
        series: [
          {
            name: "项目进度",
            type: "bar",
            // data: [75, 60, 40, 85, 65],
            data: projectData.value.map((item) => item.progress),
          },
        ],
      })
    }

    if (budgetChartRef.value) {
      const budgetChart = echarts.init(budgetChartRef.value)
      budgetChart.setOption({
        animation: false,
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "left",
        },
        series: [
          {
            name: "经费使用",
            type: "pie",
            radius: "50%",
            // data: [

            //   // { value: 120, name: "设备费" },
            //   // { value: 80, name: "材料费" },
            //   // { value: 40, name: "差旅费" },
            //   // { value: 30, name: "会议费" },
            //   // { value: 10, name: "其他费用" },
            // ],
            data: budgetData.value.map((item) => {
              return {
                value: item.expensePercent,
                name: item.expenseType,
              }
            }),
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      })
    }
  })
})
</script>

<style scoped>
.el-menu {
  border-right: none;
}
</style>
